<template>
    <div>
        <!-- 表单布局 -->
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item prop="link">
                <el-input v-model="ruleForm.link" placeholder="链接" />
            </el-form-item>
            <el-form-item prop="alt">
                <el-input v-model="ruleForm.alt" placeholder="提示" />
            </el-form-item>
            <el-form-item prop="img">
                <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadFn">
                    <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-input style="margin-top: 15px;" v-model="ruleForm.img" placeholder="base64图片" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 表单实例对象
const ruleFormRef = ref<FormInstance>()
// 定义的数据
const ruleForm = reactive({
    link: '',
    alt: '',
    img: '', // base64
})

// 表单验证规则
const rules = reactive<FormRules<typeof ruleForm>>({
    link: [{ required: true, message: 'link不能为空', trigger: 'blur' }],
    alt: [{ required: true, message: 'alt不能为空', trigger: 'blur' }],
    img: [{ required: true, message: 'img不能为空', trigger: 'blur' }],
})



// 图片上传
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
// 图片上传触发的事件 http-request
//导入上传接口
import { uploadImgApi } from '@/api/banner'
// 导入路由函数
import { useRouter } from 'vue-router'
const router = useRouter()
const uploadFn = (data: any) => {
    //console.log('data', data.file); // data.file 就是上传的文件

    if (!['image/jpeg', 'image/jpg', 'image/png'].includes(data.file.type)) {
        ElMessage.error('图片格式必须是jpg/png/jpeg!')
        return false
    } else if (data.file.size / 1024 >= 50) {
        ElMessage.error('图片大小不能超过50KB!')
        return false
    }

    // 上面的条件都满足
    // 01: 创建一个文件读取器
    const reader = new FileReader();
    // 02: 将上传的文件读取为base64格式
    reader.readAsDataURL(data.file);
    // 03: 监听读取过程(当触发onload 事件的时候,表示读取成功 )
    reader.onload = function () {
        //console.log(this.result);  // 表示读取的结果
        ruleForm.img = this.result as string
    }
}

// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 调用上传接口
            uploadImgApi(ruleForm).then((res: any) => {
                // console.log('res', res);
                ElMessage({
                    type: res.code == 200 ? 'success' : 'error',
                    message: res.message,
                    duration: 1000,
                    onClose() {
                        if (res.code == 200) {
                            // 跳转到轮播图列表页
                            router.push('/banner/bannerlist')
                        }
                    }
                })

            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style lang="scss" scoped>
.el-form {
    width: 500px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

// scss 样式穿透 ::v-deep 类名/标签名
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    border: 1px dashed grey
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>